<template>
	<view>
		<view class="inforBox">
			<view class="headBox">
				<view class="headBoxL">
					<image src="../../static/mmx/avatar.jpg" mode=""></image>
					<view class="nameBox">
						<view class="nameArea">
							<view class="name">菜小白菜店铺</view>
							<view class="tips">
								<u-icon name="calendar" color="#FA6C3E" size="28"></u-icon>
								<text>签到</text>
							</view>
						</view>
						<view class="fanNum">粉丝 168.8W</view>
					</view>
				</view>
				<view class="headBoxR">关注</view>
			</view>
			<view class="vipBox">
				<view class="vipBoxL">
					<view class="isvip">您还不是本店会员哦</view>
					<view class="joinService">尊享xx项专属特权</view>
				</view>
				<view class="vipBoxR">
					加入会员
				</view>
			</view>
		</view>
		<view class="shopInfoBox">
			<view class="activityBox">
				<view class="activTitleBox">
					<view class="title">店铺活动</view>
					<view class="more">
						<text>全部活动</text>
						<u-icon name="arrow-right" color="#AAAAAA" size="28"></u-icon>
					</view>
				</view>
				<view class="activList">
					<activityCard :goods-list="activlist"></activityCard>
				</view>
			</view>
			<view class="activityBox">
				<view class="activTitleBox">
					<view class="title">店铺推荐</view>
					<view class="more">
						<text>全部商品</text>
						<u-icon name="arrow-right" color="#AAAAAA" size="28"></u-icon>
					</view>
				</view>
				<commodityCard :goods-list="commoditylist"></commodityCard>
			</view>
			<view class="activityBox">
				<view class="activTitleBox">
					<view class="title">店铺相关</view>
				</view>
				<view class="skill-sequence-panel-content-wrapper"> 
				    <scroll-view class="skill-sequence-panel-content" scroll-x :style="'height:'+scrollH+'px'">
				        <view class="skill-sequence-skill-wrapper " v-for="(group,index) in aboutImgList">
							<view class="aboutItem">
								<u-image src="../../static/mmx/storeImg.png" style="height: 100%;" mode="aspectFit" width="100%">
									<u-loading slot="loading"></u-loading>
								</u-image>
							</view>
				        </view>
				    </scroll-view>
				</view>
			</view>
			<view class="activityBox">
				<view class="activTitleBox">
					<view class="title">店铺位置</view>
				</view>
				<view class="addressBox">
					<view class="tipsBox">
						<view class="name">武昌火车站</view>
						<view class="tips">湖北省武汉市武昌区中山路556号</view>
					</view>
					<view class="maps">
						<image src="../../static/mmx/activity7.png" mode="widthFix" style="width: 100%;"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="fixedBox">
			<view class="item">
				<image class="avatr" src="../../static/mmx/avatar.jpg" mode=""></image>
			</view>
			<view class="item">
				<u-icon name="bag" color="#666666" size="40"></u-icon>
				<text>商品</text>
			</view>
			<view class="item">
				<u-icon name="server-man" color="#666666" size="40"></u-icon>
				<text>客服</text>
			</view>			
		</view>
	</view>
</template>

<script>
	import activityCard from "@/pages/goods/activityCard"; //活动列表
	import commodityCard from "@/pages/goods/commodityCard"; //商品列表
	export default {
		components: {
			activityCard:activityCard,
			commodityCard:commodityCard
		},
		data() {
			return {
				activlist:[
					{img:require("@/static/mmx/activity1.png")},
					{img:require("@/static/mmx/activity1.png")},
					{img:require("@/static/mmx/activity1.png")},
				],
				commoditylist:[
					{img:require("@/static/mmx/activity2.png")},
					{img:require("@/static/mmx/activity2.png")},
					{img:require("@/static/mmx/activity2.png")},
				],
				scrollH: 160,
				aboutImgList:[{},{},{}],
				latitude: 39.909,
				longitude: 116.39742,
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.inforBox{
	background: #FFFFFF;
	width: 100%;
	padding: 46rpx 30rpx;
	.headBox{
		padding: 46rpx 0rpx;
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.headBoxL{
			display: flex;
			image{
				height: 108rpx;
				width: 108rpx;
				border-radius: 50%;
				margin-right: 30rpx;
			}
			.nameBox{
				display: flex;
				flex-direction: column;
				justify-content: center;
				.nameArea{
					display: flex;
					align-items: center;
					.name{
						font-size: 36rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 36rpx;
						max-width: 250rpx;
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
					}
					.tips{
						margin-left: 20rpx;
						background: #FFE7DF;
						border-radius: 18px;
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 6rpx 12rpx;
						text{
							font-size: 20rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #FA6C3E;
							line-height: 28rpx;
							margin-left: 8rpx;
						}
					}
					
				}
				.fanNum{
					margin-top: 18rpx;
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #AAAAAA;
					line-height: 24rpx;
				}
			}
		}
		.headBoxR{
			width: 120rpx;
			height: 48rpx;
			border-radius: 8rpx;
			border: 2rpx solid #FA6C3E;
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FA6C3E;
			line-height: 36rpx;
			text-align: center;
			line-height: 48rpx;
		}
	}
	.vipBox{
		padding: 52rpx 50rpx;
		width: 100%;
		box-sizing: border-box;
		background: linear-gradient(158deg, #5F5F7C 0%, #333350 100%);
		display: flex;
		align-items: center;
		justify-content: space-between;
		.vipBoxL{
			width: 300rpx;
			flex-shrink: 0;
			font-family: PingFangSC-Semibold, PingFang SC;
			.isvip{
				font-size: 28rpx;
				font-weight: 600;
				color: #FFFFFF;
				line-height: 28rpx;
			}
			.joinService{
				margin-top: 14rpx;
				font-size: 22rpx;
				font-weight: 400;
				color: #AEAFBF;
				line-height: 24rpx;
			}
		}
		.vipBoxR{
			flex-shrink: 0;
			width: 148rpx;
			height: 60rpx;
			background: linear-gradient(90deg, #FCF2D9 0%, #F8E1B2 100%);
			border-radius: 12rpx;
			text-align: center;
			line-height: 60rpx;
			font-size: 24rpx;
			font-weight: 600;
			color: #333350;
		}
	}
}
.shopInfoBox{
	background-color: #F4F8FB;
	width: 100%;
	box-sizing: border-box;
	padding: 0px 16rpx;
	margin-bottom:170rpx;
	.activTitleBox{
		height: 122rpx;
		width: 100%;
		padding-left: 14rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.title{
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #010103;
		}
		.more{
			font-size: 22rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #AAAAAA;
			height: 100%;
			display: flex;
			align-items: center;
			text{
				display: block;
				margin-right: 8rpx;
			}
		}
	}
	.activList{
		width: 100%;
		padding: 16rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 16rpx;
	}
	.uni-swiper-tab {
		min-width:100%;
	}
	.skill-sequence-panel-content-wrapper{
	  position: relative;
	  height: 320rpx;
	  white-space:nowrap;
	}
	.skill-sequence-panel-content{
	  min-width:100%;
	}
	.skill-sequence-skill-wrapper{
	  display: inline-block;
	}
	.skill-sequence-panel-content .skill-sequence-skill-wrapper{
	  margin-right: 16rpx;  
	}
	.aboutItem{
		width: 540rpx;
		height: 320rpx;
		border-radius: 16rpx;
		margin-right: 16rpx;
		display: inline-block
		/deep/ uni-image{
			// height: 320rpx;
			width: 98%;
		}
	}
	.addressBox{
		width: 100%;
		height: 388rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		.tipsBox{
			padding: 24rpx 26rpx;
			width: 100%;
			box-sizing: border-box;
			.name{
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
			}
			.tips{
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #848484;
				margin-top: 16rpx;
			}
		}
		.maps{
			width: 100%;
			height: 264rpx;
		}
	}
		
}
.fixedBox{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 150rpx;
	background: #FFFFFF;
	padding: 0px 16rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	.item{
		margin-right: 52rpx;
		font-size: 20rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 24rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		width:33%;
		box-sizing: border-box;
		.avatr{
			width: 72rpx;
			height: 72rpx;
			border-radius: 50%;
		}
		text{
			margin-top: 10rpx;
		}
	}
	.item:first-child{
		padding-left:38rpx;
		align-items: flex-start;
	}
	.item:last-child{
		padding-right:38rpx;
		align-items: flex-end;
	}
}
</style>
